// 大轮播图
var carouselIndex = 0;
// console.log(imgs);
function carousel() {
    $('.big-carousel img')[0].src = imgs[carouselIndex]
    $('.circle span').eq(carouselIndex).siblings().removeClass('big-carouselActive');
    $('.circle span').eq(carouselIndex).addClass('big-carouselActive')
}
carousel()

function change() {
    var timer = setInterval(function () {
        carouselIndex = carouselIndex >= 7 ? 0 : carouselIndex + 1;
        carousel()
    }, 3000);
    $('.big-carousel').mouseover(() => {
        clearInterval(timer)
    })
}
change();
$('.big-carousel').mouseleave(() => {
    change();
})
$('.circle span').mouseover(function () {
    carouselIndex = $(this).index()
    carousel();
})
// 上下切换
$('.big-carousel>section span').click(function () {
    let index = $(this).index()
    carouselIndex = index ? carouselIndex + 1 : carouselIndex - 1;
    carouselIndex = carouselIndex > 7 ? 0 : carouselIndex;
    carouselIndex = carouselIndex < 0 ? 7 : carouselIndex;
    carousel();
})
// 小轮播图
var smallIndex = 0;

function smallcarousel() {
    for (let i = 0; i < $('.small-carousel img').length; i++) {
        $('.small-carousel img')[i].src = carousel_smalls[smallIndex][i];
    }

}
smallcarousel()

function smallChange() {
    var timer2 = setInterval(function () {
        smallIndex = smallIndex >= 2 ? 0 : smallIndex + 1;
        smallcarousel()
    }, 5000);
    $('.small-carousel').mouseover(() => {
        $('.small-carousel section').css('display', 'flex');
        clearInterval(timer2)
    })
}
smallChange()
$('.small-carousel').mouseleave(() => {
    $('.small-carousel section').css('display', 'none');
    smallChange();
})
// // 上下切换
$('.small-carousel>section span').click(function () {
    let index = $(this).index()
    smallIndex = index ? smallIndex + 1 : smallIndex - 1;
    smallIndex = smallIndex > 2 ? 0 : smallIndex;
    smallIndex = smallIndex < 0 ? 2 : smallIndex;
    smallcarousel();
})
var states = [{
    left: 0,
    zIndex: 2,
}, {
    left: 800,
    zIndex: 0,
}, {
    left: 1600,
    zIndex: 0,
}, {
    left: 2400,
    zIndex: 0,
}, {
    left: 3200,
    zIndex: 0,
}, {
    left: 4000,
    zIndex: 0,
}, {
    left: -800,
    zIndex: 0,
}]

function slider() {
    let sliderStr = ``;
    goodsCarousel.forEach((arr) => {
        sliderStr += `<ul>`;
        arr.forEach((obj) => {
            sliderStr += `<li>
                        <div class="slider-img">
                            <img src="${obj.img}" alt="">
                        </div>
                        <h6>${obj.title}</h6>
                        <p><span>${obj.price}</span></p>
                    </li>`
        })
        sliderStr += `</ul>`;
    })
    $('.sliderAll').html(sliderStr);
}
slider();

function sliderChange() {
    $('.sliderAll ul').each((i, item) => {
        $(item).css({
            left: states[i].left,
            zIndex: states[i].zIndex,
        })
    })
}
sliderChange()
// 上一张
$('.slider .prev').click(function () {
    states.push(states.shift())
    sliderChange();
})

// 下一张
$('.slider .next').click(function () {
    states.unshift(states.pop())
    sliderChange();
})
// 京东秒杀所在栏目最右侧小轮播图
var swiper = new Swiper(".mySwiper", {
    direction: 'horizontal',
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    speed: 1500,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
        waitForTransition: false,
    },
});
// 进度条轮播
var progress_str = ``;
progressSlider.forEach((obj, i) => {
    if (i % 2 == 0) {
        progress_str += `
        <div class="goods-slider-item">
        <img src="${obj.img}" alt="">
        <p>${obj.name}</p></div>`
    } else {
        progress_str += `<div class="goods-slider-item">
        <p>${obj.name}</p>
        <img src="${obj.img}" alt=""></div>`
    }
})
$('.goods-slider-box').html(progress_str);
var left = 0;
function progressCarousel() {
    left -= 1;
    $('.goods-slider-box').css('left', left + 'px');
    let progress = Math.abs(left / 2854) * 100;
    $('.nice-goods-slider input').val(progress);
    if (left < -2854) {
        left = 0;
    }
}
var time = setInterval(progressCarousel, 10);
$('.nice-goods').hover(function () {
    clearInterval(time)
}, function () {
    time = setInterval(progressCarousel, 10);
})
$('.nice-goods-slider input')[0].oninput = function () {
    left = -($(this).val() / 100 * 2854);
    progressCarousel()
}
// 新品首发轮播
var new_states = [
    {
        zIndex: -1,
        width: 130,
        height: 130,
        left: -200,
        top: 0,
    },
    {
        zIndex: 1,
        width: 104,
        height: 104,
        left: -114,
        top: 23,
    },
    {
        zIndex: 1,
        width: 104,
        height: 104,
        left: -42,
        top: 23,
    },
    {
        zIndex: 2,
        width: 130,
        height: 130,
        left: 74,
        top: 0,
    },
    {
        zIndex: 1,
        width: 104,
        height: 104,
        left: 214,
        top: 23,
    },
    {
        zIndex: -1,
        width: 130,
        height: 130,
        left: 290,
        top: 0,
    },  {
        zIndex: -1,
        width: 130,
        height: 130,
        left: 290,
        top: 0,
    },   {
        zIndex: -1,
        width: 130,
        height: 130,
        left: 290,
        top: 0,
        
    }  
]
function prevPic(){
    $('.pic').each((i, item) => {
        $(item).css({ zIndex: new_states[i].zIndex}).finish().animate(new_states[i],500)
        if($(item).css('left')=='-42px'){
            $(item).find('.goods-carousel-txt').css('opacity','1')
        }else{
            $(item).find('.goods-carousel-txt').css('opacity','0')
        }
    })
}
function nextPic() {
    $('.pic').each((i, item) => {
        $(item).css({ zIndex: new_states[i].zIndex}).finish().animate(new_states[i],500)
        if($(item).css('left')=='214px'){
            $(item).find('.goods-carousel-txt').css('opacity','1')
        }else{
            $(item).find('.goods-carousel-txt').css('opacity','0')
        }
    })
}
nextPic();

function play() {
    new_states.unshift(new_states.pop())
    nextPic()
}
var changePic = setInterval(() => {
    play()
}, 4000);
// 鼠标移入移出
$('.new-goods').hover(function(){
    clearInterval(changePic);
},function(){
    changePic = setInterval(() => {
        play()
    }, 4000);
})
// 上下切换
$('.toggle span').click(function(){
    if($(this).index()){
        // 下一张
        play()
    }else{
        // 上一张
        new_states.push(new_states.shift())
        prevPic();
    }
})